<template>
  <div class="com-global-cropper">
    <div class="img-box">
      <img :id="imgId" class="cropper-image" alt="" />
    </div>
    <div class="right-con">
      <div v-if="preview" :id="previewId" class="preview-box"></div>
      <div class="button-box">
        <a-button
          style="width: 150px;margin-top: 10px;"
          type="primary"
          @click="imgSelClick"
        >
          选择图片
        </a-button>
        <template v-if="insideSrc">
          <div class="option-btn-bg w-flex-between">
            <a-button class="btn" type="primary" @click="rotate">
              <a-icon type="reload" />
            </a-button>
            <a-button class="btn" type="primary" @click="shrink">
              <a-icon type="delete" />
            </a-button>
            <a-button class="btn" type="primary" @click="magnify">
              <a-icon type="plus" />
            </a-button>
            <a-button class="btn" type="primary" @click="scale('X')">
              <a-icon type="column-width" />
            </a-button>
            <a-button class="btn" type="primary" @click="scale('Y')">
              <a-icon type="column-height" />
            </a-button>
            <a-button class="btn" type="primary" @click="move(0, -moveStep)">
              <a-icon type="arrow-up" />
            </a-button>
            <a-button class="btn" type="primary" @click="move(-moveStep, 0)">
              <a-icon type="arrow-left" />
            </a-button>
            <a-button class="btn" type="primary" @click="move(0, moveStep)">
              <a-icon type="arrow-down" />
            </a-button>
            <a-button class="btn" type="primary" @click="move(moveStep, 0)">
              <a-icon type="arrow-right" />
            </a-button>
          </div>
          <a-button
            style="width: 150px;margin-top: 10px;"
            type="primary"
            @click="crop"
          >
            {{ cropButtonText }}
          </a-button>
        </template>
      </div>
    </div>
    <img :src="resultData" class="result-img" alt="" />
    <input
      ref="INPUT_FILE"
      class="w-input-hid"
      type="file"
      accept="image/*"
      @change="fileChange"
      @click.stop
    />
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
import '@/icons/resize-horizontal'
import '@/icons/resize-vertical'
import { ExistFile, LocalImage } from '@/utils/tool'
export default {
  name: 'ComGlobalCropper',
  props: {
    preview: {
      type: Boolean,
      default: true
    },
    moveStep: {
      type: Number,
      default: 4
    },
    cropButtonText: {
      type: String,
      default: '裁剪'
    }
  },
  data () {
    return {
      cropper: null,
      insideSrc: '',
      selIamge: null,
      resultData: null
    }
  },
  computed: {
    imgId () {
      return 'com-global-cropper-img'
    },
    previewId () {
      return 'com-global-cropper-preview'
    }
  },
  watch: {
    selIamge (src) {
      this.replace(src)
    },
    insideSrc (src) {
      this.replace(src)
    }
  },
  mounted () {
    this.$nextTick(() => {
      const dom = document.getElementById(this.imgId)
      this.cropper = new Cropper(dom, {
        preview: `#${this.previewId}`,
        checkCrossOrigin: true
      })
    })
  },
  methods: {
    /**
     * 文件改变的时候调用
     * @param e 事件
     */
    fileChange (e) {
      if (ExistFile(e)) {
        // 预览图片
        LocalImage(e)
          .then((data) => {
            this.selIamge = data
          })
          .catch(() => {
            this.$message.error('预览图片出错')
          })
      }
    },
    /**
     * 图片选择按钮点击
     */
    imgSelClick () {
      this.$refs.INPUT_FILE.dispatchEvent(new MouseEvent('click'))
    },
    replace (src) {
      this.cropper.replace(src)
      this.insideSrc = src
    },
    rotate () {
      this.cropper.rotate(90)
    },
    shrink () {
      this.cropper.zoom(-0.1)
    },
    magnify () {
      this.cropper.zoom(0.1)
    },
    scale (d) {
      this.cropper[`scale${d}`](-this.cropper.getData()[`scale${d}`])
    },
    move (...argu) {
      this.cropper.move(...argu)
    },
    crop () {
      this.resultData = this.cropper.getCroppedCanvas().toDataURL()
    }
  }
}
</script>

<style lang="less">
.com-global-cropper {
  width: 600px;
  height: 340px;
  display: flex;
  .img-box {
    height: 340px;
    width: 430px;
    flex: 1 0 auto;
    border: 1px solid #ebebeb;
    display: inline-block;
    img {
      max-width: 100%;
      display: block;
    }
  }
  .right-con {
    display: inline-block;
    width: 170px;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0 10px;
    .preview-box {
      height: 150px !important;
      width: 100% !important;
      overflow: hidden;
      border: 1px solid #ebebeb;
    }
    .button-box {
    }
    .option-btn-bg {
      padding-top: 10px;
      box-sizing: border-box;
      flex-wrap: wrap;
      height: 107px;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        width: 30%;
        .svg-icon {
          width: 16px;
          height: 16px;
          fill: #fff;
        }
      }
    }
  }
  .result-img {
    max-width: 340px;
    max-height: 340px;
  }
  .bg {
    background-image: url('');
  }
}
</style>
